<template>
  <div class="home-contianer">
    <el-row :gutter="20">
      <el-col :span="18" style="background: white; flex: 1;padding-top:15px;">
        <div id="h-chart2" class="grid-content" style="background: white; flex: 1;padding-top:15px;"></div>
      </el-col>
      <el-col :span="6" style="background: white; flex: 1;padding-top:15px;">
        <div class="grid-content" id="h-chart1" style="background: white; flex: 1;padding-top:15px;">left</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18" >
        <div id="h-chart4" class="grid-content" style="background: white; flex: 1;padding-top:15px;"></div>
      </el-col>
      <el-col :span="6" style="background: white; flex: 1;padding-top:15px;">
        <div class="h-top-right task-table grid-content">
          <h3 class="h3">通知</h3>
          <table border="0" cellspacing="0" cellpadding="0">
            <tr v-for="(row, index) in list" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ row.desc }}</td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
    <!-- <div class="h-top">
      <div class="h-top-left" id="h-chart1">left</div>
      <div id="h-chart2"></div>
      <div class="h-top-right task-table">
        <h3 class="h3">通知</h3>
        <table border="0" cellspacing="0" cellpadding="0">
          <tr v-for="(row, index) in list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ row.desc }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div style="display: flex;">
      <div
        id="h-chart4"
        style="height: 450px; background: white; flex: 1;padding-top:15px;"
      ></div>
    </div>-->
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { chart1, chart2, chart3, chart4 } from './home/home-chart-options';
import { ref, onMounted, onUnmounted } from 'vue';
var $chart2;
export default {
  components: {},
  data() {
    return {
      n: 90,
      value1: '1',
      applicants: {
        //报名信息
        day: 20, //本日
        week: 150, //本周
        month: 1200, //本月
        totalBoy: 800,
        totalGirl: 890,
        taotal: 1690
      }, //报名信息
      list: [
        { desc: '有新的计划单，请前往【订单查询】查看' },
        { desc: '订单20230601000123已计算，请前住【领料单查询】查看' },
        { desc: '订单20230601000124已计算，请前住【领料单查询】查看' },
        { desc: '订单20230601000125已计算，请前住【领料单查询】查看' },
        { desc: '58#炉请求送料' },
        { desc: '订单20230601000126已计算，请前住【领料单查询】查看' },
        { desc: '59#炉请求送料' },
        { desc: '订单20230601000127已计算，请前住【领料单查询】查看' },
        { desc: '60#炉请求送料' }
      ]
    };
  },
  setup() {
    let open = (item) => {
      window.open(item.url, '_blank');
    };
    let interval;
    onMounted(() => {
      $chart = echarts.init(document.getElementById('h-chart1'));
      $chart.setOption(chart1);
      $chart2 = echarts.init(document.getElementById('h-chart2'));
      $chart2.setOption(chart2);
      // $chart3 = echarts.init(document.getElementById('h-chart3'));
      // $chart3.setOption(chart3);
      let $chart4 = echarts.init(document.getElementById('h-chart4'));
      $chart4.setOption(chart4);
    });
    onUnmounted(() => {
      interval && clearInterval(interval);
      if ($chart) {
        $chart.dispose();
        $chart2.dispose();
        // $chart3.dispose();
      }
    });
    return { open };
  },
  destroyed() {
    $chart2 = null;
  }
};
var $chart, $chart2;
// window.addEventListener("resize", function () {
//   $chart2.setOption(chart2);
// });
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  background: #eee;
}

.grid-content {
  border-radius: 4px;
  min-height: 370px;
  background: #eee;
}


.home-contianer {
  // padding: 6px;
  // background: #eee;
  // width: 100%;
  // height: 100%;
  // // max-width: 800px;
  // // position: absolute;
  // top: 0;
  // right: 0;
  // left: 0;
  // margin: 0 auto;

  // .h-top {
  //   //display: flex;

  //   .h-top-left {
  //     height: 100%;
  //     width: 100%;
  //     background: white;
  //   }

  //   height: 450px;
  // }


  .h-top-right {
    // flex: 1;

    width: 400px;
    height: 100%;
    background: white;
  }

  .h3 {
    padding: 7px 15px;
    font-weight: 500;
    background: #fff;
    border-bottom: 1px dotted #d4d4d4;
  }
}

.task-table {
  table {
    width: 100%;

    .thead {
      font-weight: bold;
    }

    tr {
      cursor: pointer;

      td {
        border-bottom: 1px solid #f3f3f3;
        padding: 9px 8px;
        font-size: 12px;
      }
    }

    tr:hover {
      background: #eee;
    }
  }
}</style>
